import React from 'react'
import $ from 'jquery'
import dispatcher from 'lib/dispatcher'
import Modal from 'lib/components/Modal.jsx'
import {updateMeasurementName} from '../apis/validApis/interaction'
import {Success,Info,Warning} from 'lib/components/Notify.jsx'
export default class SettingView extends Modal {
  constructor(props){
    super(props)
    this.state = {
      msg:'',
      saving:false
    }
    this.renameAction = this.renameAction.bind(this)
  }
  renameAction(){
    var _this = this
    if(this.state.saving){
      return ;
    }
    updateMeasurementName({
      id:this.props.id,
      alias:$(this.refs.interactionAlias).val()
    }).post().then(function(res,params){
      Success('修改成功')
      _this.close();
      dispatcher.dispatch({
        $type:'rename_interaction',
        id:params.id,
        name:params.alias
      })
    },function(err){
      _this.setState({
        saving:false,
        msg:err.msg||err.message
      })
    },function(){
      _this.setState({
        saving:true,
        msg:null
      })
    })
  }
  renderHeader(){
    return (
      <h4>Interaction信息设置</h4>
    )
  }
  renderBody(){
    return (
      <div className="form-group horizontal">
        <ul>
          <li>
            <label className="control-label">设置别名</label>
            <input className="input-text input-inline input-whitebg" name="alias" ref="interactionAlias" defaultValue={this.props.alias} />
            {
              this.state.msg?(
                <span className="msg-error">{this.state.msg}</span>
              ):null
            }
          </li>
        </ul>
      </div>
    )
  }
  renderFooter(){
    return (
      <div>
        {
          this.state.saving?(
            <span>保存中...</span>
          ):(
            <button className="btn-green" onClick={this.renameAction} type="button">保存</button>
          )
        }

      </div>
    )
  }
}
